@charset "utf-8";
@import 'color.scss';

@mixin hr($color) {
    hr {
        clear: both;
        border: 0;
        width: 100%;
        height: 1px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: $color;
    }
}

//透明度
@mixin BgTransparent($color, $number1, $number2) {
    background: rgba($color, $number1) !important; //标准浏览器通用  
    background-color: $color;
    position: relative;
    filter: alpha(opacity=$number2);
}

/* BackgroundTeansparent 背景透明度 包括内容 */
@mixin BgTransparentAll($number1, $number2) {
    /* older safari/Chrome browsers */
    -webkit-opacity: $number1;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: $number1;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: $number1;
    /* IE9 + etc...modern browsers, Firefox */
    opacity: $number1;
    /* IE 4-9 */
    filter: alpha(opacity=$number2);
    /*This works in IE 8 & 9 too*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$number2})";
    /*IE4-IE9*/
    *filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$number2});
}

/*垂直渐变*/
@mixin VerticalGradient($color1, $color2) {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$color1}, endColorstr=#{$color2}, GradientType='0');
    /* IE 6,7,8 */
    background-image: -moz-linear-gradient(top, $color1, $color2);
    /* Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $color1), color-stop(1, $color2));
    /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, $color1, $color2);
    /* Safari5.1 Chrome10+ */
    background: -ms-linear-gradient(top, $color1, $color2);
    /* IE10+ */
    background: -o-linear-gradient(top, $color1, $color2);
    /* Opera 11.10+ */
}

/*圆角*/
@mixin radius($number) {
    -moz-border-radius: #{$number}px;
    /* Gecko browsers */
    -webkit-border-radius: #{$number}px;
    /* Webkit browsers */
    border-radius:#{$number}px;
    /* W3C syntax */
}

/*阴影*/
@mixin shadow($rownum, $colnum, $dimnum, $color) {
    -moz-box-shadow: $rownum $colnum $dimnum $color;
    -webkit-box-shadow: $rownum $colnum $dimnum $color;
    box-shadow: $rownum $colnum $dimnum $color;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#{$color}')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#{$color}');
}

/*换行*/
@mixin newLine {
    white-space: normal;
    word-spacing: normal;
    word-wrap: break-word;
    word-break: break-all;
}

/*模糊*/
@mixin blur($number) {
    filter:blur(#{$number}px);
    -webkit-filter:blur(#{$number}px);
    -moz-filter:blur(#{$number}px);
    -o-filter:blur(#{$number}px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$number}');
}

/* 放射渐变 */
@mixin radial-gradient($color1,$color2,$color3){
	 background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from($color1), to($color2), color-stop(90%, $color3)),
            -webkit-gradient(radial, 105 105, 20, 112 120, 50, from($color1), to($color2), color-stop(75%, $color3)),
            -webkit-gradient(radial, 95 15, 15, 102 20, 40, from($color1), to($color2), color-stop(80%, $color3)),
            -webkit-gradient(radial, 0 150, 50, 0 140, 90, from($color1), to($color2), color-stop(80%, $color3)),
}

/*变换动画*/
@mixin comic_1($time, $speed) {
    -webkit-transition: #{$time}s ease-in-out;
    -moz-transition: #{$time}s ease-in-out;
    -ms-transition: #{$time}s ease-in-out;
    -o-transition: #{$time}s ease-in-out;
    transition: #{$time}s ease-in-out;
    transform:translateZ(#{$speed}px);
    -moz-transform:translateZ(#{$speed}px);
    -webkit-transform:translateZ(#{$speed}px);
    -o-transform:translateZ(#{$speed}px);
}

@mixin comic($time) {
    -webkit-transition: #{$time}s ease-in-out;
    -moz-transition: #{$time}s ease-in-out;
    -ms-transition: #{$time}s ease-in-out;
    -o-transition: #{$time}s ease-in-out;
    transition: #{$time}s ease-in-out;

    /*解决闪屏问题*/
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@mixin transform3d($x, $y, $z) {
    -webkit-transform: translate3d($x, $y, $z);
    -moz-transform: translate3d($x, $y, $z);
    -ms-transform: translate3d($x, $y, $z);
    transform: translate3d($x, $y, $z);
}

@mixin transitiontime($time) {
    -webkit-transition: #{$time}s ease-in-out;
    -moz-transition: #{$time}s ease-in-out;
    -ms-transition: #{$time}s ease-in-out;
    -o-transition: #{$time}s ease-in-out;
    transition: #{$time}s ease-in-out;
}

/*强制不换行*/
@mixin breakLine{
	white-space:nowrap;
}


/*指定行数显示省略号*/
@mixin Line($number) {
    @if($number==1) {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-text-overflow: ellipsis;
    }
    @else {
        overflow: hidden;
        word-break: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: #{$number};
        -webkit-box-orient: vertical;
    }
}

/*文字不被选中*/
@mixin unselect() {
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

// 定义二段循环动画
@mixin animation($name, $attr, $attr_num1, $attr_num2, $time) {
    @include repeat_comic($name, $attr, $attr_num1, $attr_num2);
    animation: $name #{$time}s infinite linear;
}

// 自定义自旋循环动画
@mixin repeat_comic($name, $attr, $attr_num1, $attr_num2) {
    @keyframes $name {
        0% {
            -moz-transform: $attr($attr_num1);
            -o-transform: $attr($attr_num1);
            -webkit-transform: $attr($attr_num1);
            transform: $attr($attr_num1);
        }
        100% {
            -moz-transform: $attr($attr_num2);
            -o-transform: $attr($attr_num2);
            -webkit-transform: $attr($attr_num2);
            transform: $attr($attr_num2);
        }
    }
}